<script setup>
import { useRoute,useRouter } from 'vue-router';
import { getHealthyList  } from '@/api/Member/index.js'
import { ElMessage,ElMessageBox  } from 'element-plus';
const props = defineProps({
    uuid:{
        default:"",
        type:[String,Number]
    }
})

const recordList = ref([]);
const pageLoading = ref(false);
const _getHealthyList = async ()=>{
    try{
        pageLoading.value = true;
        let params = {
            storeId: "",
            orderBy: "",
            rule:"",
            "page.size":99999,
            "page.current":1,
            memberId:props.uuid,
            enterpriseId: "",
            storeId:"",
            type:1
        }
        let result = await getHealthyList(params);
        recordList.value = result.records.map(lis=>{
            let fileIds = lis.fileIds.split(",").filter(lis=>lis != '');
            let pdfUrl = lis.pdfUrl.split(",").filter(lis=>lis != '')
            return {
                ...lis,
                fileIds,
                pdfUrl
            }
        })

    }catch(e){
        console.log(e);
    }finally{
        pageLoading.value = false;
    }
}
_getHealthyList();
const img1 = ref(new URL("@/assets/images/login-bg3.png",import.meta.url))
</script>
<template>
    <div class="record-area"  v-loading="pageLoading">
        <template v-if="recordList.length>0">
            <div class="record-lis" v-for="(item,index) in recordList" :key="index">
                <div class="lis-head">
                    <div class="left-head">
                        <img src="@/assets/icon/store-name.png" alt="" class="img1">
                        <div class="name-info">
                            {{ item.storeName || '-'}}
                        </div>
                    </div>
                    <div class="right-head">
                        <div class="person">
                            <span>银川九为互联网医院｜{{ item.doctorName || '-'}}</span>
                        </div>
                        <div class="time">{{ item.createTime || '-'}}</div>
                    </div>
                </div>
                <div class="lis-body">
                    <div class="lis-item">
                        <div class="lis-label">
                            既往史：
                        </div>
                        <div class="lis-value">
                            {{ item.pastHistory || '-'}}
                        </div>
                    </div>
                    <div class="lis-item">
                        <div class="lis-label">
                            过敏史：
                        </div>
                        <div class="lis-value">
                            {{ item.allergy || '-'}}
                        </div>
                    </div>
                    <div class="lis-item">
                        <div class="lis-label">
                            肝肾功能：
                        </div>
                        <div class="lis-value">
                            {{ item.liverAndKidney || '-'}}
                        </div>
                    </div>
                    <div class="lis-item">
                        <div class="lis-label">
                            生育状态：
                        </div>
                        <div class="lis-value">
                            {{ item.fertility || '-'}}
                        </div>
                    </div>
                    <div class="lis-item" style="width:50%">
                        <div class="lis-label">
                            首诊诊断：
                        </div>
                        <div class="lis-value">
                            {{ item.inquiryResult || '-'}}
                        </div>
                    </div>
                    <div class="lis-item" style="width:50%">
                        <div class="lis-label">
                            线上诊断：
                        </div>
                        <div class="lis-value">
                            {{ item.doctorInquiryResultd || '-'}}
                        </div>
                    </div>
                    <div class="lis-item" style="width:50%" v-if="item.fileIds.length>.0">
                        <div class="lis-label">
                            首诊资料：
                        </div>
                        <div class="lis-value">
                            <div class="img-b" >
                                <div class="mask" style="pointer-events: none;" v-if="item.fileIds.length>1">
                                    +{{ item.fileIds }}
                                </div>
                                <div style="position:relative">
                                    <div class="img2" >
                                        <el-image
                                            :src="item.fileIds[0]"
                                            :zoom-rate="1.2"
                                            :preview-src-list="item.fileIds"

                                            style="width:100px;height:100px"
                                        />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="lis-item" style="width:50%">
                        <div class="lis-label">
                            康复方案：
                        </div>
                        <div class="lis-value">
                            <div class="img-b" >
                                <div class="mask" style="pointer-events: none;" v-if="item.pdfUrl.length>1">
                                    +{{ item.pdfUrl }}
                                </div>
                                <div style="position:relative">
                                    <div class="img2" >
                                        <el-image
                                            :src="item.pdfUrl[0]"
                                            :zoom-rate="1.2"
                                            :preview-src-list="item.pdfUrl"

                                            style="width:100px;height:100px"
                                        />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
        </template>
        <div class="empty-data" v-else>
            <div class="empty-img">
                <div class="text">暂无健康档案</div>
            </div>
        </div>
    </div>
</template>
<style lang="less" scoped>
.empty-data{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .empty-img{
        width: 300px;
        height: 200px;
        background: url('@/assets/images/empty-table.png');
        background-size: 100% 100%;
        position: relative;
        .text{
            position: absolute;
            bottom:0;
            width: 100%;
            text-align: center;
            color: #666666;
            line-height: 14px;
            font-size: 14px;

        }
    }
}
.record-area{
    width: 100%;
    min-height: 40%;
    .record-lis{
        width: 100%;
        margin-bottom:16px;
        background: #f6f6f6;
        padding:0 12px;
        border-radius: 4px;
        box-sizing: border-box;
        .lis-body{
            width: 100%;
            padding-top:16px;
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;
            .lis-item{
                width: 25%;
                margin-bottom:16px;
                display: flex;
                justify-content: flex-start;
                .lis-label{
                    width: 80px;
                    text-align: right;
                    color: #222222;
                    font-size: 14px;
                    font-weight: 400;
                    line-height: 14px;
                }
                .lis-value{
                    width: calc(100% - 80px);
                    color: #000000;
                    font-size: 14px;
                    font-weight: 400;
                    line-height: 14px;
                    .img-b{
                        position: relative;
                        width: 100px;
                        height: 100px;
                        .img1{
                            width: 100%;
                            height: 100%;
                            border-radius: 4px;
                            position: absolute;
                            top:0;
                            left:0;
                            z-index: 1;
                        }
                        .mask{
                            width: 100%;
                            height: 100%;
                            border-radius: 4px;
                            background: rgba(0, 0, 0, 0.4);   
                            top:0;
                            left:0;
                            position: absolute;
                            z-index: 2;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            font-size: 20px;
                            color:#fff;
                            font-weight: bold;
                        }
                        .img2{
                            width: 100%;
                            height: 100%;
                            border-radius: 4px;


                        }
                    }
                }
            }
        }
        .lis-head{
            width: 100%;
            display: flex;
            justify-content: space-between;
            box-sizing: border-box;
            border-bottom:1px solid #DDDDDD;
            align-items: center;
            height: 48px;
            .right-head{
                display: flex;
                justify-content: flex-end;
                align-items: center;
                height: 100%;
                .time{
                    font-size: 14px;
                    font-weight: 400;
                    line-height: 14px;
                    color: #666666;
                    margin-left:16px;
                }
                .person{
                    display: flex;
                    justify-content: flex;
                    border-radius: 4px;
                    background: rgba(52, 128, 255, 0.1);
                    padding: 7px 8px;
                    color: #3480ff;
                    font-size: 14px;
                    line-height: 14px;
                    .img2{
                        width: 14px;
                        height: 14px;
                        margin-right: 4px;
                    }
                }
            }
            .left-head{
                height: 100%;
                display: flex;
                align-items: center;
                .name-info{
                    margin-left:4px;
                    margin-right:16px;
                    color:#000;
                    font-weight:bold;
                    line-height: 14px;
                    font-size: 14px;
                }
                .img1{
                    width: 18px;
                    height: 18px;
                }
            }
        }
    }
}
</style>